﻿@model IList<ProductSpecificationModel>
<div class="spec-container table-responsive">
    @{
        var group = Model.GroupBy(x => x.SpecificationAttributeName);
    }
    <table class="table data-table border-bottom-0">
        <colgroup>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        @foreach (var item in group)
        {
            <tr class="spec">
                <td class="border-bottom border-top-0">
                    <div class="spec-name">
                        @{
                            var groupList = item.ToList();
                        }
                        @groupList[0].SpecificationAttributeName:
                    </div>
                </td>
                <td class="border-bottom border-top-0">
                    <div class="spec-value d-inline-flex w-100">
                        @foreach (var spec in groupList)
                        {
                            @if (string.IsNullOrEmpty(spec.ColorSquaresRgb))
                            {
                                <div class="mb-2 mr-2">
                                    @Html.Raw(spec.ValueRaw)
                                </div>
                            }
                            else
                            {
                                <div class="color-squares mb-2 mr-2">
                                    <span class="color-container" title="@Html.Raw(spec.ValueRaw)">
                                        <span class="color" style="background-color: @(spec.ColorSquaresRgb);">&nbsp;</span>
                                    </span>
                                </div>
                            }
                        }
                    </div>
                </td>

            </tr>
        }
        </tbody>
    </table>
</div>